<template>
	<view class="box">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelWidth="150" labelPosition="left" :model="model1" :rules="rules" ref="uForm">
			<u-form-item label="请选择组别 " prop="groupId" :borderBottom="true" ref="item1">
				<uni-data-select v-model="model1.groupId" :localdata="groups" @change="groupChange"></uni-data-select>
			</u-form-item>
			<u-form-item label="请选择车辆 " prop="carsId" :borderBottom="true" ref="item1">
				<uni-data-select v-model="model1.carsId" :localdata="cars"></uni-data-select>
			</u-form-item>
			<u-form-item label="ECU级别" prop="ecuNum" :borderBottom="true" ref="item1">
				<div class="flex-end w100">
					<u-rate :touchable="false" activeIcon="integral-fill" inactiveIcon="integral"
						v-model="model1.ecuNum"></u-rate>
					<div class="ml10 c999">{{model1.ecuNum}}</div>
				</div>
			</u-form-item>

			<u-form-item label="请选择地图" prop="mapId" :borderBottom="true" ref="item1">
				<uni-data-select v-model="model1.mapId" :localdata="maps"></uni-data-select>
			</u-form-item>
			<u-form-item label="请输入成绩" prop="scope" :borderBottom="true" ref="item1">
				<u-input type="text" v-model="model1.scope" border="none" placeholder="例如:01:28.886"
					inputAlign="right" placeholder-class="c0c"/>
			</u-form-item>
			<u-form-item label="请上传图片" prop="name" ref="item1">
				<div class="flex-end w100">
					<cropper selWidth="750rpx" selHeight="160rpx" @upload="myUpload" :avatarSrc="model1.file"
						avatarStyle="width:100rpx;height:100rpx;">
					</cropper>
				</div>
			</u-form-item>
			<u-form-item label="" prop="name" ref="item1">
				<u-button text="提交" type="primary" shape="circle" @click="submit"></u-button>
			</u-form-item>

		</u--form>

	</view>
</template>

<script>
	import {
		upload
	} from '../../utils/request.js'
	import cropper from '../../components/cropper/index'
	export default {
		data() {
			return {
				model1: {
					carsId: '',
					mapId: '',
					ecuNum: 5,
					file: ''
				},
				fileList1: [],
				groups: getApp().globalData.groups,
				maps: getApp().globalData.maps,
				ups: getApp().globalData.ups,
				cars: getApp().globalData.cars,
				rules: {
					'carsId': {
						type: 'number',
						required: true,
						message: '请选择车辆',
						trigger: ['blur', 'change']
					},
					'scope': [{
						type: 'string',
						required: true,
						message: '请输入成绩',
						trigger: ['blur', 'change']
					}, {
						pattern: /^\d{1,2}:\d{1,2}\.\d{1,5}$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请输入正确的成绩，例如01:28.886'
					}],
					'mapId': {
						type: 'number',
						required: true,
						message: '请选择地图',
						trigger: ['blur', 'change']
					},
					'file': {
						type: 'string',
						required: true,
						message: '请上传图片',
						trigger: ['blur', 'change']
					}
				}
			};
		},
		components: {
			cropper
		},
		onLoad() {

		},
		methods: {
			//上传返回图片
			myUpload(rsp) {
				console.log(rsp)
				this.model1.file = rsp.path
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					let model1 = this.copy(this.model1)
					model1.scope = model1.scope.split(':')
					model1.scope[1] = model1.scope[1].split('.')
					let scope = []
					scope[0] = parseInt(model1.scope[0])
					scope[1] = parseInt(model1.scope[1][0])
					scope[2] = parseInt(model1.scope[1][1])
					let all = 0
					all += scope[0] * 60000
					all += scope[1] * 1000
					all += scope[2] * 1
					model1.scope = all
					upload('/api/upload/differentialRatio', model1, 'POST').then(r => {
						uni.$u.toast('上传成功')
						this.back(1, 1500)
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			groupChange() {
				this.getCars(this.model1.groupId, () => {
					this.cars = getApp().globalData.cars
				})
			}
		},
	};
</script>
<style lang="scss">
	:deep(.u-upload__wrap) {
		justify-content: flex-end !important;
	}
</style>